<template>
  <div class="search-container">
    <!-- 搜索头部 -->
    <div class="search-header">
      <div class="search-input-wrapper">
        <el-input
          v-model="searchQuery"
          placeholder="搜索非遗项目、传承人、活动..."
          class="search-input"
          :prefix-icon="Search"
          clearable
          @input="handleSearch"
          @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button type="primary" @click="handleSearch">
              搜索
            </el-button>
          </template>
        </el-input>
      </div>
      <div class="search-tags">
        <el-tag
          v-for="tag in hotTags"
          :key="tag.id"
          class="hot-tag"
          :type="tag.type"
          effect="plain"
          @click="handleTagClick(tag)"
        >
          {{ tag.name }}
        </el-tag>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-radio-group v-model="searchType" @change="handleTypeChange">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="heritage">非遗项目</el-radio-button>
        <el-radio-button label="master">传承人</el-radio-button>
        <el-radio-button label="activity">活动</el-radio-button>
      </el-radio-group>

      <div class="filter-options">
        <el-select v-model="selectedRegion" placeholder="地区" clearable>
          <el-option
            v-for="region in regions"
            :key="region.value"
            :label="region.label"
            :value="region.value"
          />
        </el-select>

        <el-select v-model="selectedCategory" placeholder="类别" clearable>
          <el-option
            v-for="category in categories"
            :key="category.value"
            :label="category.label"
            :value="category.value"
          />
        </el-select>

        <el-select v-model="selectedLevel" placeholder="级别" clearable>
          <el-option
            v-for="level in levels"
            :key="level.value"
            :label="level.label"
            :value="level.value"
          />
        </el-select>
      </div>
    </div>

    <!-- 搜索结果 -->
    <div class="search-results">
      <div v-if="loading" class="loading-state">
        <el-skeleton :rows="3" animated />
      </div>

      <template v-else>
        <div v-if="searchResults.length === 0" class="empty-state">
          <el-empty description="暂无搜索结果" />
        </div>

        <div v-else class="results-grid">
          <!-- 非遗项目卡片 -->
          <el-card
            v-for="item in searchResults"
            :key="item.id"
            class="result-card"
            shadow="hover"
            @click="showDetail(item)"
          >
            <div class="card-image">
              <el-image :src="item.image" fit="cover" />
              <div class="card-level" v-if="item.level">
                <el-tag :type="getLevelType(item.level)" effect="dark">
                  {{ item.level }}
                </el-tag>
              </div>
            </div>
            <div class="card-content">
              <h3 class="card-title">{{ item.name }}</h3>
              <p class="card-description">{{ item.description }}</p>
              <div class="card-meta">
                <el-tag size="small" effect="plain">{{ item.category }}</el-tag>
                <span class="card-region">{{ item.region }}</span>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 分页 -->
        <div class="pagination-section">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[12, 24, 36, 48]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </template>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      :title="selectedItem?.name"
      width="60%"
      class="detail-dialog"
    >
      <div v-if="selectedItem" class="detail-content">
        <div class="detail-header">
          <el-image :src="selectedItem.image" fit="cover" class="detail-image" />
          <div class="detail-info">
            <h3>{{ selectedItem.name }}</h3>
            <div class="detail-meta">
              <el-tag :type="getLevelType(selectedItem.level)">
                {{ selectedItem.level }}
              </el-tag>
              <el-tag size="small" effect="plain">{{ selectedItem.category }}</el-tag>
              <span class="detail-region">{{ selectedItem.region }}</span>
            </div>
            <p class="detail-description">{{ selectedItem.description }}</p>
          </div>
        </div>

        <el-tabs class="detail-tabs">
          <el-tab-pane label="基本信息">
            <div class="detail-section">
              <h4>项目介绍</h4>
              <p>{{ selectedItem.introduction }}</p>
            </div>
            <div class="detail-section">
              <h4>历史渊源</h4>
              <p>{{ selectedItem.history }}</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="传承人">
            <div class="masters-grid">
              <el-card
                v-for="master in selectedItem.masters"
                :key="master.id"
                class="master-card"
                shadow="hover"
              >
                <el-image :src="master.avatar" fit="cover" class="master-avatar" />
                <div class="master-info">
                  <h4>{{ master.name }}</h4>
                  <p>{{ master.title }}</p>
                </div>
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane label="相关活动">
            <el-timeline>
              <el-timeline-item
                v-for="activity in selectedItem.activities"
                :key="activity.id"
                :timestamp="activity.date"
                placement="top"
              >
                <h4>{{ activity.title }}</h4>
                <p>{{ activity.description }}</p>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

// 状态管理
const searchQuery = ref('');
const searchType = ref('all');
const selectedRegion = ref('');
const selectedCategory = ref('');
const selectedLevel = ref('');
const currentPage = ref(1);
const pageSize = ref(12);
const loading = ref(false);
const detailVisible = ref(false);
const selectedItem = ref(null);

// 热门标签
const hotTags = [
  { id: 1, name: '剪纸艺术', type: 'success' },
  { id: 2, name: '陶瓷工艺', type: 'warning' },
  { id: 3, name: '传统音乐', type: 'info' },
  { id: 4, name: '传统舞蹈', type: 'danger' },
  { id: 5, name: '传统医药', type: '' }
];

// 筛选选项
const regions = [
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广东', value: 'guangdong' },
  { label: '江苏', value: 'jiangsu' }
];

const categories = [
  { label: '传统技艺', value: 'craft' },
  { label: '传统美术', value: 'art' },
  { label: '传统音乐', value: 'music' },
  { label: '传统舞蹈', value: 'dance' }
];

const levels = [
  { label: '国家级', value: 'national' },
  { label: '省级', value: 'provincial' },
  { label: '市级', value: 'city' }
];

// 搜索结果
const searchResults = ref([
  {
    id: 1,
    name: '剪纸艺术',
    description: '传统剪纸技艺的展示与传承',
    image: 'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg',
    level: '国家级',
    category: '传统美术',
    region: '北京',
    introduction: '剪纸艺术是中国最普及的民间艺术之一，具有悠久的历史和深厚的文化底蕴。',
    history: '剪纸艺术起源于汉代，经过历代发展，形成了独特的艺术风格。',
    masters: [
      {
        id: 1,
        name: '张三',
        title: '国家级传承人',
        avatar: 'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg'
      }
    ],
    activities: [
      {
        id: 1,
        title: '剪纸艺术展',
        date: '2024-01-15',
        description: '展示传统剪纸艺术的魅力'
      }
    ]
  },
  {
    id: 2,
    name: '陶瓷工艺',
    description: '传统陶瓷制作工艺的传承与发展',
    image: 'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg',
    level: '省级',
    category: '传统技艺',
    region: '景德镇',
    introduction: '景德镇陶瓷工艺是中国传统工艺的瑰宝，以其精湛的技艺和独特的艺术风格闻名于世。',
    history: '景德镇陶瓷工艺有着千年历史，是中国陶瓷文化的代表。',
    masters: [
      {
        id: 2,
        name: '李四',
        title: '省级传承人',
        avatar: 'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg'
      }
    ],
    activities: [
      {
        id: 2,
        title: '陶瓷工艺展',
        date: '2024-01-20',
        description: '展示传统陶瓷工艺的精湛技艺'
      }
    ]
  }
]);

// 计算属性
const total = computed(() => searchResults.value.length);

// 方法
const handleSearch = () => {
  if (!searchQuery.value.trim()) {
    ElMessage.warning('请输入搜索关键词');
    return;
  }
  loading.value = true;
  // 模拟搜索延迟
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};

const handleTagClick = (tag) => {
  searchQuery.value = tag.name;
  handleSearch();
};

const handleTypeChange = () => {
  handleSearch();
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

const showDetail = (item) => {
  selectedItem.value = item;
  detailVisible.value = true;
};

const getLevelType = (level) => {
  const types = {
    '国家级': 'danger',
    '省级': 'warning',
    '市级': 'info'
  };
  return types[level] || '';
};
</script>

<style scoped>
.search-container {
  @apply min-h-screen bg-gray-50;
}

/* 搜索头部 */
.search-header {
  @apply bg-white shadow-sm p-6;
}

.search-input-wrapper {
  @apply max-w-3xl mx-auto mb-4;
}

.search-input {
  @apply w-full;
}

.search-tags {
  @apply flex flex-wrap gap-2 justify-center;
}

.hot-tag {
  @apply cursor-pointer;
}

/* 筛选区域 */
.filter-section {
  @apply bg-white p-4 flex flex-wrap gap-4 items-center justify-center shadow-sm;
}

.filter-options {
  @apply flex gap-4;
}

/* 搜索结果 */
.search-results {
  @apply max-w-7xl mx-auto p-6;
}

.loading-state {
  @apply p-8;
}

.empty-state {
  @apply py-12;
}

.results-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
}

.result-card {
  @apply cursor-pointer overflow-hidden;
}

.card-image {
  @apply relative h-48;
}

.card-level {
  @apply absolute top-4 right-4;
}

.card-content {
  @apply p-4;
}

.card-title {
  @apply text-lg font-semibold text-gray-800 mb-2;
}

.card-description {
  @apply text-gray-600 text-sm mb-4 line-clamp-2;
}

.card-meta {
  @apply flex justify-between items-center;
}

.card-region {
  @apply text-sm text-gray-500;
}

/* 分页 */
.pagination-section {
  @apply flex justify-center py-6;
}

/* 详情弹窗 */
.detail-content {
  @apply space-y-6;
}

.detail-header {
  @apply flex gap-6 mb-6;
}

.detail-image {
  @apply w-64 h-48 rounded-lg;
}

.detail-info {
  @apply flex-1;
}

.detail-info h3 {
  @apply text-2xl font-bold text-gray-800 mb-2;
}

.detail-meta {
  @apply flex items-center gap-2 mb-2;
}

.detail-region {
  @apply text-gray-500;
}

.detail-description {
  @apply text-gray-600;
}

.detail-section {
  @apply mb-6;
}

.detail-section h4 {
  @apply text-lg font-semibold text-gray-800 mb-2;
}

.masters-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
}

.master-card {
  @apply flex items-center gap-4 p-4;
}

.master-avatar {
  @apply w-16 h-16 rounded-full;
}

.master-info h4 {
  @apply font-medium text-gray-800 mb-1;
}

.master-info p {
  @apply text-sm text-gray-500;
}

/* Element Plus 样式覆盖 */
:deep(.el-tabs__nav-wrap::after) {
  @apply h-0.5;
}

:deep(.el-tabs__item) {
  @apply text-lg;
}

:deep(.el-tabs__item.is-active) {
  @apply text-primary-500;
}

:deep(.el-radio-button__inner) {
  @apply px-6;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .filter-section {
    @apply flex-col;
  }

  .filter-options {
    @apply flex-col w-full;
  }

  .detail-header {
    @apply flex-col;
  }

  .detail-image {
    @apply w-full;
  }
}
</style> 